<template>
	<view style="padding:10rpx 50rpx;">
		<view>
			<form @submit="submit">
				<view><text class="gui-text-small">标题</text></view>
				<view class="gui-border-b"><input type="text" class="gui-form-input" v-model="title" name="title" placeholder="填写标题" /></view>
				<view><text class="gui-text-small">姓名</text></view>
				<view class="gui-border-b"><input type="text" class="gui-form-input" v-model="name" name="name" placeholder="您的真实姓名" /></view>
				<view><text class="gui-text-small">手机号</text></view>
				<view class="gui-border-b"><input type="number" class="gui-form-input" v-model="phone" name="phone" placeholder="您的手机号" /></view>
				
				<view><text class="gui-text-small">身份证号码</text></view>
				<view class="gui-border-b"><input type="text" class="gui-form-input" v-model="idNo" name="idNo" placeholder="身份证号码" /></view>
				
				<view><text class="gui-text-small">所在区域</text></view>
				<view class="gui-border-b" @tap="openPicker">
					<input type="text" class="gui-form-input" name="area" :value="area" disabled placeholder="请选择所在地区">
				</view>
				<view><text class="gui-text-small">详细地址</text></view>
				<view class="gui-border-b" @tap="xuanaddress">
					<input type="text" class="gui-form-input" disabled v-model="address" name="address" placeholder="家庭住址" />
				</view>
				<view class="gui-margin-top-large">
					<text class="gui-text">门头图片</text>
				</view>
				<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
					<view class="gui-idcard-items-image" @tap="selectImg(3)">
						<gui-image :src="img.substring(0,4)=='../.' ? img : imgServer+img " :width="380"></gui-image>
					</view>
				</view>
				<view class="gui-margin-top-large">
					<text class="gui-text">身份证照片 ( 个人信息面 )</text>
				</view>
				<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
					<view class="gui-idcard-items-image" @tap="selectImg(1)">
						<gui-image :src="idCard1.substring(0,4)=='../.' ? idCard1 : imgServer+idCard1 " :width="380"></gui-image>
					</view>
				</view>
				<view class="gui-margin-top-large">
					<text class="gui-text">身份证照片 ( 国徽图案面 )</text>
				</view>
				<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
					<view class="gui-idcard-items-image" @tap="selectImg(2)">
						<gui-image :src="idCard2.substring(0,4)=='../.' ? idCard2 : imgServer+idCard2 " :width="380"></gui-image>
					</view>
				</view>
				<view style="margin: 25rpx 0 15rpx 0;" >
					<checkbox-group name="name9"	class="gui-flex gui-rows gui-wrap">
						<label class="gui-check-item">
							<checkbox color="#ff3730" value="1" style="margin-right: 15rpx;"></checkbox>
								我确认该信息是否完整有效
						</label>
					</checkbox-group>
				</view>
				<view class="tishi">
					<span>温馨提示：</span> 申请成为代理，后台进行审核。通过后可以进行社区团购！
				</view>
				<view style="margin-top:38rpx;">
					<button type="default" class="gui-button gui-bg-red" formType="submit" style="border-radius:50rpx;">
						<text class="gui-h4 gui-color-white">申请代理</text>
					</button>
				</view>
			</form>
		</view>

		<gui-area-picker ref="graceAddressPicker" @confirm="confirm" :level="3" cancelText="关闭"></gui-area-picker>
	</view>
</template>
<script>
import { is_login } from '@/common.js';
let graceJS = require('@/lizhili/js/grace.js');
let common = require('@/common.js');
var graceChecker = require('@/lizhili/js/checker.js');
export default {
	data() {
		return {
			title:'',
			phone: '',
			name: '',
			idNo: '',
			area: '',
			address:'',
			sheng:'',
			shi:'',
			xian:'',
			idCard1 : '../../static/que.png',
			idCard2 : '../../static/que.png',
			img:'../../static/que.png',
			lat:'',
			lon:'',
			address_name:'',
			imgServer:''
		};
	},
	onLoad(){
		this.imgServer=uni.common.imgServer
	},
	methods: {
		selectImg(e){
			uni.chooseImage({
				count:1,
				success: async(chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths[0];
					let w;
					w=	await uni.common.uploadCards(tempFilePaths);
					if(w && w.code==1){
						if(e==1){
							this.idCard1=w.data
						}
						if(e==2){
							this.idCard2=w.data
						}
						if(e==3){
							this.img=w.data
						}
					}
				},
				fail(){
					uni.common.msg('选择图片失败')
				}
			});
		},
		xuanaddress(){
			uni.chooseLocation({
				success: (res)=> {
					this.address_name=res.name
					this.address=res.address
					this.lat=res.latitude
					this.lon=res.longitude
				},
				fail(e) {
					console.log(e);
					uni.common.msg('获取位置失败')
				}
			});
		},
		openPicker : function () {
			this.$refs.graceAddressPicker.open();
		},
		confirm : function (e) {
			console.log(e);
			this.sheng=e.codes[0]
			this.shi=e.codes[1]
			this.xian=e.codes[2]
			this.area = e.names[0]+'-'+e.names[1]+'-'+e.names[2];
		},
		submit: function(e) {
			let that=this
			var formData = e.detail.value;
			console.log(formData);
			var rule = [
				{ name: 'title', checkType: 'string', checkRule: '5,', errorMsg: '请填写标题,最少5个字符' },
				{ name: 'name', checkType: 'string', checkRule: '1,10', errorMsg: '真实姓名填写错误' },
				{ name: 'phone', checkType: 'phoneno', checkRule: '', errorMsg: '手机号码有误' },
				{ name: 'idNo', checkType: 'string', checkRule: '18,18', errorMsg: '请正确填写身份证号' },
				{ name: 'area', checkType: 'string', checkRule: '5,', errorMsg: '请选择地区' },
				{ name: 'address', checkType: 'string', checkRule: '5,', errorMsg: '请选择详细地址' },
			];
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				//这里判断图片是否上传
				if(this.img.substring(0,4)=='../.'){
					uni.showToast({
						icon: 'none',
						title: '请上传门头'
					});
					return false
				}
				if(this.idCard2.substring(0,4)=='../.'){
					uni.showToast({
						icon: 'none',
						title: '请上传身份证'
					});
					return false
				}
				if(this.idCard1.substring(0,4)=='../.'){
					uni.showToast({
						icon: 'none',
						title: '请上传身份证'
					});
					return false
				}
				if(formData.name9.length<=0){
					uni.showToast({
						icon: 'none',
						title: '请勾选授权同意'
					});
					return false
				}
				uni.showLoading({
					title: '提交中'
				});
				
				uni.common.post(
					uni.common.apiServer + 'my',
					{
						type: 'update_tuan_shen',
						name:formData.name,
						idNo:formData.idNo,
						phone:formData.phone,
						sheng_html:formData.area,
						address:formData.address,
						address_name:this.address_name,
						lat:this.lat,
						lon:this.lon,
						idCard1:this.idCard1,
						idCard2:this.idCard2,
						sheng:this.sheng,
						shi:this.shi,
						xian:this.xian,
						title:this.title,
						img:this.img
					},
					false,
					res => {
						if (res.code == 1) {
							uni.common.back(res.message)
						} else {
							uni.common.msg(res.message)
						}
					},
					e => {
						console.log(e);
					}
				);
				
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		}
	}
};
</script>
<style>
.gui-idcard-items{
	margin:35rpx 0 15rpx 0;
}
.gui-text-small{
	font-size: 25rpx;
}
.login-logo {
	width: 180rpx;
	height: 180rpx;
	font-size: 80rpx;
	text-align: center;
	line-height: 120rpx;
	padding: 30rpx;
	border-radius: 18rpx;
}
.other-login-icons {
	width: 88rpx;
	height: 88rpx;
	text-align: center;
	font-size: 70rpx;
	margin: 20rpx;
}
.sendmsg {
	height: 30rpx;
	width: 200rpx;
	font-size: 24rpx;
	line-height: 30rpx;
}
.tishi span{
	color: #ff3730;
}
.tishi{
	margin-top: 30rpx;
	font-size: 14px;
	line-height: 1.6;
	color: #999999;
}
</style>
